<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>组件</title>
</head>

<style type="text/css">

</style>


<body>
    <div id="app">
        <cpn ref="aaa" :number1="num1" :number2="num2" @n1change="nn1change" @n2change="nn2change"></cpn>
        <button @click="printChild">Show Child</button>
    </div>
    <template id="cpn">
        <div>
            <p> props:{{number1}}</p> 
            <p> data1:{{n1}}</p> 
            <input type="text" :value="n1" @input="input1">
            <p> props:{{number2}}</p>
            <p> data2:{{n2}}</p> 
            <input type="text" :value="n2" @input="input2">
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                num1: 1,
                num2: 0,
            },
            methods: {
                nn1change(value) {
                    this.num1 = parseInt(value);
                },
                nn2change(value) {
                    this.num2 = parseInt(value);
                },
                printChild() {
                    console.log(this.$refs.aaa.n1);
                }
            },
            components: {
                cpn: {
                    template: '#cpn',
                    props: {
                        number1: Number,
                        number2: Number,
                    },
                    data() {
                        return {
                            n1: this.number1,
                            n2: this.number2
                        }
                    },
                    methods: {
                        input1(event) {
                            this.n1 = event.target.value;
                            this.$emit('n1change', this.n1)
                        },
                        input2() {
                            this.n2 = event.target.value;
                            this.$emit('n2change', this.n2)

                        }
                    }
                }
            }
        });
    </script>

</body>

</html>